<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){

            /* 
                点击超链接以后，删除一个员工的信息
            */
            //获取所有的超链接
            var allA=document.getElementsByTagName("a");
            //为每一个超链接都绑定一个单击响应函数
            for(var i=0;i<allA.length;i++){

                /* 
                    for循环会在页面加载完成后立即执行
                    而响应函数会在超链接点击时才执行
                    当响应函数执行时，for循环早已执行完毕
                */
               alert("for循环正在执行"+i)
               allA[i].onclick=function(){
                   alert("响应函数正在执行"+i);
                   //alert(allA[i]);
                   return false;

               }
               
                   
                };
            }

            

    </script>
</head>
<body>
    <table id="employeeTable">

        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="=deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@shou.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>

        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h2>添加新员工</h2>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email">
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
                
            </tr>

        </table>
    </div>
</body>
</html>